<script setup>
import { ref, watch, onMounted, defineProps, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import { timestampToDateTime } from '@/utils/index.js'
const laneNumList = ref([])
const tableData = ref([])
const mapWebB3Info = ref([])
const mapWebB4Info = ref([])
// 定义 props
const props = defineProps({
  jsonData: {
    type: Object,
    required: true,
  },
})

const selectData = ref([])
const radio = ref('1')
watch(
  () => props.jsonData,
  (newValue, oldValue) => {
    laneNumList.value = newValue.mapWebB3Info.map((item) => {
      return item.laneNum
    })
    tableData.value = newValue.mapWebCrossInfo
    setData(newValue)
  },
  { deep: true }
)
const setData = (data) => {
  if (radio.value == '1') {
    mapWebB3Info.value = data.mapWebB3Info
    mapWebB4Info.value = data.mapWebB4Info
  } else {
    mapWebB3Info.value = data.mapWebB3Info.filter((item) => {
      if (selectData.value.indexOf(item.laneNum) != -1) {
        return item
      }
    })
    mapWebB4Info.value = data.mapWebB4Info.filter((item) => {
      if (selectData.value.indexOf(item.laneNum) != -1) {
        return item
      }
    })
  }
}

const radioChange = () => {
  setData(props.jsonData)
}
const selectChange = () => {
  setData(props.jsonData)
}
let maxWidth = ref('542px')
onMounted(() => {
  // nextTick(() => {
  //   const width = document.querySelector('.showList-container').getBoundingClientRect().width
  //   maxWidth.value = width - 20 + 'px'
  // })
})
</script>

<template>
  <div class="showList-container">
    <div class="title">
      <p>路口概览数据</p>
    </div>

    <div class="showTableEle" :style="{ maxWidth: maxWidth }">
      <el-table :data="tableData" max-height="220" border style="width: 100%; height: 220px">
        <el-table-column fixed prop="intersectionNum" width="60px" label="路口号" align="center" />
        <el-table-column prop="name" width="170px" label="时间" align="center">
          <template #default="scope">{{ timestampToDateTime(scope.row.webCrossInfo.timestamp) }}</template>
        </el-table-column>
        <el-table-column prop="name" label="拥堵" width="56px" align="center">
          <template #default="scope">{{ scope.row.webCrossInfo.congestionStatus ? '正常' : '异常' }}</template>
        </el-table-column>
        <el-table-column prop="name" label="失衡" width="56px" align="center">
          <template #default="scope">{{ scope.row.webCrossInfo.unbalanceStatus ? '正常' : '异常' }}</template>
        </el-table-column>
        <el-table-column prop="name" label="死锁" width="56px" align="center">
          <template #default="scope">{{ scope.row.webCrossInfo.deadlockStatus ? '正常' : '异常' }}</template>
        </el-table-column>
        <el-table-column prop="name" label="溢出1" width="58px" align="center">
          <template #default="scope">{{ scope.row.webCrossInfo.dir1OverflowStatus ? '正常' : '异常' }}</template>
        </el-table-column>
        <el-table-column prop="name" label="溢出2" width="58px" align="center">
          <template #default="scope">{{ scope.row.webCrossInfo.dir2OverflowStatus ? '正常' : '异常' }}</template>
        </el-table-column>
        <el-table-column prop="name" label="溢出3" width="58px" align="center">
          <template #default="scope">{{ scope.row.webCrossInfo.dir3OverflowStatus ? '正常' : '异常' }}</template>
        </el-table-column>
        <el-table-column prop="name" label="溢出4" width="58px" align="center">
          <template #default="scope">{{ scope.row.webCrossInfo.dir4OverflowStatus ? '正常' : '异常' }}</template>
        </el-table-column>
      </el-table>
    </div>

    <div class="title">
      <p>数据展示范围</p>
    </div>

    <div class="select">
      <el-radio-group @change="radioChange" v-model="radio">
        <el-radio value="1" size="small">全部车道数据</el-radio>
        <el-radio value="2" size="small">部分车道数据</el-radio>
      </el-radio-group>
    </div>

    <div class="title" v-show="radio === '2'">
      <p>车道号选择</p>
    </div>

    <el-select v-show="radio === '2'" @change="selectChange" v-model="selectData" multiple placeholder="请选择">
      <el-option v-for="item in laneNumList" :key="item" :label="item" :value="item"> </el-option>
    </el-select>

    <div class="title">
      <p>断面检测指标</p>
    </div>

    <div class="showTableEle" :style="{ maxWidth: maxWidth }">
      <el-table :data="mapWebB4Info" max-height="200" border style="width: 100%; height: 200px">
        <el-table-column fixed prop="laneNum" label="车道号" width="55px" align="center" />
        <el-table-column label="开始时间" width="180px" align="center">
          <template #default="scope">{{ timestampToDateTime(scope.row.webB4Info.startTimestamp) }}</template>
        </el-table-column>
        <el-table-column label="结束时间" width="180px" align="center">
          <template #default="scope">{{ timestampToDateTime(scope.row.webB4Info.endTimestamp) }}</template>
        </el-table-column>
        <el-table-column label="流量(veh)" width="80px" align="center">
          <template #default="scope">{{ scope.row.webB4Info.trafficFlow }}</template>
        </el-table-column>
        <el-table-column label="平均点速度(km/h)" width="80px" align="center">
          <template #default="scope">{{ scope.row.webB4Info.meanV }}</template>
        </el-table-column>
        <el-table-column label="平均时间占有率（%）" width="80px" align="center">
          <template #default="scope">{{ scope.row.webB4Info.meanTimeOccupancy }}</template>
        </el-table-column>
        <el-table-column label="平均车头时距（s）" width="70px" align="center">
          <template #default="scope">{{ scope.row.webB4Info.meanTimeHeadwaySection }}</template>
        </el-table-column>

        <!-- 新增 -->
        <el-table-column label="绿灯起亮时排队长度（m）" width="80px" align="center">
          <template #default="scope">{{ scope.row.webB4Info.greenLightStartQueueLength }}</template>
        </el-table-column>
        <el-table-column label="红灯起亮时未通过车辆数（辆）" width="80px" align="center">
          <template #default="scope">{{ scope.row.webB4Info.redLightStartCarNums }}</template>
        </el-table-column>
        <el-table-column label="绿灯起亮时类排队车辆数（辆）" width="80px" align="center">
          <template #default="scope">{{ scope.row.webB4Info.greenLightStartQueueNums }}</template>
        </el-table-column>
        <el-table-column label="绿灯损失时间（s）" width="70px" align="center">
          <template #default="scope">{{ scope.row.webB4Info.greenLightLossTime }}</template>
        </el-table-column>
      </el-table>
    </div>

    <div class="title">
      <p>区间检测指标</p>
    </div>

    <div class="showTableEle" :style="{ maxWidth: maxWidth }">
      <el-table :data="mapWebB3Info" max-height="222" border style="width: 100%; height: 222px">
        <el-table-column fixed prop="laneNum" width="60px" label="车道号" align="center" />
        <el-table-column label="时间" width="180" align="center">
          <template #default="scope">{{ timestampToDateTime(scope.row.webB3Info.timestamp) }}</template>
        </el-table-column>
        <el-table-column label="排队长度（m）" width="70px" align="center">
          <template #default="scope">{{ scope.row.webB3Info.queueLength }}</template>
        </el-table-column>
        <el-table-column label="头车位置（m）" width="65px" align="center">
          <template #default="scope">{{ scope.row.webB3Info.headCarPosition }}</template>
        </el-table-column>
        <el-table-column label="尾车位置（m）" width="65px" align="center">
          <template #default="scope">{{ scope.row.webB3Info.tailCarPosition }}</template>
        </el-table-column>
        <el-table-column label="车辆数量" width="65px" align="center">
          <template #default="scope">{{ scope.row.webB3Info.carNums }}</template>
        </el-table-column>
        <el-table-column label="是否拥堵" width="65px" align="center">
          <template #default="scope">{{ scope.row.webB3Info.congestionStatus != 1 ? '否' : '是' }}</template>
        </el-table-column>
        <el-table-column label="是否溢出" width="65px" align="center">
          <template #default="scope">{{ scope.row.webB3Info.overflowStatus ? '否' : '是' }}</template>
        </el-table-column>

        <!-- 后补充 -->
        <el-table-column label="溢流预警" width="65px" align="center">
          <template #default="scope">{{ scope.row.webB3Info.overflowWarning }}</template>
        </el-table-column>
        <el-table-column label="溢流死锁" width="65px" align="center">
          <template #default="scope">{{ scope.row.webB3Info.deadLock }}</template>
        </el-table-column>
        <el-table-column label="行人过街数（个）" width="65px" align="center">
          <template #default="scope">{{ scope.row.webB3Info.peopleNums }}</template>
        </el-table-column>
        <el-table-column label="非机动车过街数（个）" width="65px" align="center">
          <template #default="scope">{{ scope.row.webB3Info.nonmotorNums }}</template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
.showList-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-left: 20px;
}

.title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.search {
  height: 30px;
  margin-bottom: 10px;
}

.select {
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
  border: 1px solid #ccc;
  .selectBox {
    width: calc(100% - 40px);
    height: 26px;
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    .item {
      font-size: 12px;
      display: flex;
      align-items: center;
      height: auto;
      height: 20px;
      background: white;
      margin-right: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      border: 1px solid #ccc;
      border-bottom: none;
      padding: 0 2px;
      flex-shrink: 0;
      > p {
        margin-right: 6px;
      }
      > img {
        width: 12px;
        height: 12px;
        cursor: pointer;
        margin-top: 2px;
      }
    }
  }
  .selectBtn {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 20px;
    border-radius: 4px 0 0 0;
    background-color: white;
    width: 32px;
    border: 1px solid #ccc;
    border-bottom: none;
    border-right: none;
    img {
      width: 18px;
      height: 18px;
    }
  }
}

.showBtnBox {
  position: absolute;
  top: 30px;
  z-index: 99;
  background-color: white;
  height: 182px;
  width: 160px;
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 18, 38, 0.1) 0px 4px 10px 0px;
  border: 1px solid #ccc;
  border-radius: 4px;

  .el-checkbox {
    margin-top: 8px;
  }
}

.showTableEle {
  width: 100%;
  max-width: 600px;
  padding-bottom: 20px;
}

.showBtnBox {
  position: absolute;
  top: 30px;
  z-index: 99;
  background-color: white;
  height: 182px;
  width: 160px;
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 18, 38, 0.1) 0px 4px 10px 0px;
  .el-checkbox {
    margin-top: 8px;
  }
}

/* 自定义滚动条样式 */
.select ::-webkit-scrollbar {
  height: 4px; /* 滚动条的宽度 */
  width: 4px;
  cursor: pointer;
}

.select ::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道的背景色 */
  border-radius: 5px; /* 轨道的圆角 */
}

.select ::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条的颜色 */
  border-radius: 5px; /* 滚动条的圆角 */
}

.select ::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滚动条悬停时的颜色 */
}
</style>
